<template>
  <div class="leftBottom">
    <div class="ques">
      <div style="height: 50px">
        <img
          :src="active == 1 ? topImg1 : topImg2"
          alt=""
          style="height: 50px; width: 100%"
        />
      </div>

      <div class="buttons">
        <div @click="btn(1)" :class="active == 1 ? 'btn1' : 'btn2'">
          排放比榜单
        </div>
        <div @click="btn(2)" :class="active == 1 ? 'btn2' : 'btn1'">预警数</div>
      </div>
    </div>
    <div class="headerText">标题1</div>
    <template v-if="active == 1">
      <div class="myTable">
        <div class="myHead">
          <div class="th1">排名</div>
          <div class="th2">企业名称</div>
          <div class="th3">排放量（吨）</div>
          <div class="th4">当月排放比</div>
          <img src="../assets/leftBottomIcon.png" alt="" />
        </div>
        <div class="list">
          <transition-group name="indeName">
            <div class="line" v-for="item in dataList" :key="item.rank">
              <div class="th1">
                <div class="rank" :class="'rank' + item.rank">
                  <div class="top">
                    <div class="area"></div>
                    <div class="text">TOP</div>
                  </div>
                  <div class="num">
                    <div class="area"></div>
                    <div class="text">{{ item.rank }}</div>
                  </div>
                </div>
              </div>
              <div class="th2">{{ item.name }}</div>
              <div class="th3">{{ item.resultCount }}</div>
              <div class="th4">{{ item.present }}%</div>
            </div>
          </transition-group>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="myTable2">
        <div class="myHead">
          <div class="th1">排名</div>
          <div class="th2">企业名称</div>
          <div class="th3">总预警（次）</div>
          <img src="../assets/leftBottomIcon.png" alt="" />
        </div>
        <div class="list">
          <transition-group name="indeName">
            <div class="line" v-for="item in dataList" :key="item.rank">
              <div class="th1">
                <div class="rank" :class="'rank' + item.rank">
                  <div class="top">
                    <div class="area"></div>
                    <div class="text">TOP</div>
                  </div>
                  <div class="num">
                    <div class="area"></div>
                    <div class="text">{{ item.rank }}</div>
                  </div>
                </div>
              </div>
              <div class="th2">{{ item.name }}</div>
              <div class="th3">{{ item.resultCount }}</div>
            </div>
          </transition-group>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { cloneDeep } from "lodash";
export default {
  name: "LeftBottom",
  props: {},
  components: {},
  data() {
    return {
      active: 1,
      dataList: [],
      copyData1List: [
        { rank: 1, name: "企业1", resultCount: 220, present: "22" },
        { rank: 2, name: "企业2", resultCount: 180, present: "18" },
        { rank: 3, name: "企业3", resultCount: 160, present: "16" },
        { rank: 4, name: "企业4", resultCount: 140, present: "14" },
        { rank: 5, name: "企业5", resultCount: 100, present: "10" },
        { rank: 6, name: "企业6", resultCount: 60, present: "6" },
        { rank: 7, name: "企业7", resultCount: 50, present: "5" },
        { rank: 8, name: "企业8", resultCount: 40, present: "4" },
        { rank: 9, name: "企业9", resultCount: 30, present: "3" },
        { rank: 10, name: "企业10", resultCount: 20, present: "2" },
      ],
      copyData2List: [
        { rank: 1, name: "企业1", resultCount: 11 },
        { rank: 2, name: "企业2", resultCount: 8 },
        { rank: 3, name: "企业3", resultCount: 6 },
        { rank: 4, name: "企业4", resultCount: 4 },
        { rank: 5, name: "企业5", resultCount: 3 },
        { rank: 6, name: "企业6", resultCount: 2 },
        { rank: 7, name: "企业7", resultCount: 2 },
        { rank: 8, name: "企业8", resultCount: 2 },
        { rank: 9, name: "企业9", resultCount: 1 },
        { rank: 10, name: "企业10", resultCount: 1 },
      ],
      timer: null,
      timer2: null,
      topImg1: require("../assets/rightBottom3.png"),
      topImg2: require("../assets/rightBottom3.png"),
    };
  },
  computed: {},
  watch: {},
  methods: {
    btn(i) {
      if (this.active != i) {
        if (i == 1) {
          clearInterval(this.timer);
          this.dataList = cloneDeep(this.copyData1List);
          this.autoLoop();
        } else {
          clearInterval(this.timer);
          this.dataList = cloneDeep(this.copyData2List);
          this.autoLoop();
        }
        this.active = i;
      }
    },
    autoLoop() {
      if (this.dataList.length) {
        this.timer = setInterval(() => {
          if (this.dataList[0].rank == 4) {
            this.dataList = cloneDeep(this.copyData1List);
          } else {
            this.dataList = cloneDeep(this.dataList);
            this.dataList.push(this.dataList.shift());
          }
        }, 5000);
      }
    },
  },
  beforeCreate() {},
  created() {
    this.dataList = cloneDeep(this.copyData1List);
  },
  beforeMount() {},
  mounted() {},
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.leftBottom {
  position: relative;
}
.oneLineEllipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
// .item-active {
//   background: linear-gradient(90deg, rgba(10, 141, 225, 0.2) 0%, rgba(10, 141, 225, 0) 100%);
//   height: 54px!important;
//   padding: 5px 14px 8px 13px!important;
// }
.indeName-enter {
  opacity: 0;
  transform: translateY(-25px);
}

.indeName-leave-to {
  opacity: 0;
}

.indeName-enter-active {
  transition: all 0.6s ease;
}

.indeName-leave-active {
  transition: all 0.3s ease;
}

.indeName-move {
  /*下面的 .indeName-move和.indeName-leave-active 配合使用，能够实现列表后续的元素渐渐飘上来的效果*/
  transition: all 0.6s ease;
}
.rank {
  display: flex;
  .top {
    width: 64px;
    height: 24px;
    position: relative;
    .area {
      background: linear-gradient(
        270deg,
        rgba(220, 228, 232, 0.2) 0%,
        rgba(113, 144, 191, 0.2) 100%
      );
      transform: skewX(-20deg);
      width: 100%;
      height: 100%;
    }
    .text {
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #ffffff;
      line-height: 24px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding-left: 6px;
      text-align: left;
    }
  }
  .num {
    width: 28px;
    height: 24px;
    position: relative;
    .area {
      background: linear-gradient(
        270deg,
        rgba(55, 112, 139, 1) 0%,
        rgba(113, 144, 191, 1) 100%
      );
      transform: skewX(-20deg);
      width: 100%;
      height: 100%;
    }
    .text {
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #ffffff;
      line-height: 24px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      text-align: center;
    }
  }
}
.rank2 {
  .top {
    .area {
      background: linear-gradient(
        270deg,
        rgba(98, 235, 187, 0.2) 0%,
        rgba(2, 190, 56, 0.2) 100%
      );
    }
  }
  .num {
    .area {
      background: linear-gradient(
        270deg,
        rgba(49, 121, 96, 1) 0%,
        rgba(2, 190, 56, 1) 100%
      );
    }
  }
}
.rank3 {
  .top {
    .area {
      background: linear-gradient(
        270deg,
        rgba(118, 216, 255, 0.2) 0%,
        rgba(0, 141, 249, 0.2) 100%
      );
    }
  }
  .num {
    .area {
      background: linear-gradient(
        270deg,
        rgba(62, 136, 166, 1) 0%,
        rgba(0, 141, 249, 1) 100%
      );
    }
  }
}
.rank1 {
  .top {
    .area {
      background: linear-gradient(
        270deg,
        rgba(255, 211, 68, 0.2) 0%,
        rgba(255, 146, 0, 0.2) 100%
      );
    }
  }
  .num {
    .area {
      background: linear-gradient(270deg, #766221 0%, #ff9200 100%);
    }
  }
}
.ques {
  margin-bottom: 24px;
  position: relative;
  .buttons {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    margin-right: 10px;
    & > div:first-child {
      margin-right: 14px;
    }
    .btn1,
    .btn2 {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.74);
      width: 142px;
      height: 38px;
      background-image: url("../assets/leftBottomBtn.png");
      cursor: pointer;
      line-height: 38px;
    }
    .btn2 {
      background-image: url("../assets/leftBottomBtn2.png");
      // margin-left: 14px;
      // margin-right: 10px;
    }
  }
}
.myTable,
.myTable2 {
  padding: 0 10px;
  .myHead {
    height: 60px;
    background: linear-gradient(
      180deg,
      rgba(71, 150, 217, 0.3) 0%,
      rgba(34, 93, 177, 0.3) 100%
    );
    border-bottom: 2px solid rgba(22, 124, 255, 0.3);
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
    position: relative;
    img {
      position: absolute;
      left: 5px;
      top: 4px;
    }
  }
  .th1 {
    width: 133px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .th2 {
    width: 300px;
  }
  .th3 {
    width: 120px;
    text-align: center;
  }
  .th4 {
    flex: 1;
    text-align: center;
  }
  .list {
    border-top: 1px solid rgba(143, 179, 255, 0.2);
    border-bottom: 0;
    height: 479px;
    overflow: hidden;
  }
  .line {
    display: flex;
    width: 704px;
    height: 60px;
    background: rgba(39, 61, 118, 0.23);
    border: 1px solid rgba(143, 179, 255, 0.2);
    border-top: 0;
    font-size: 20px;
    color: #ffffff;
    line-height: 60px;
    text-align: left;
  }
}
.myTable2 {
  .th1 {
    width: 133px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .th2 {
    width: 410px;
  }
  .th3 {
    width: 120px;
    text-align: center;
  }
}
</style>
